<template>
	<view class="login">
		<!-- S 品牌区 -->
		<view class="brand">
			<image class="brand_logo" src="/static/icon-default/icon_logo.png" mode="scaleToFill"></image>
			<view class="brand_text">你的孤独会传染</view>
			<view class="brand_text">也会治愈</view>
		</view>
		<!-- E 品牌区 -->

		<!-- S 底部登录区 -->
		<view class="footer safe-area-inset-bottom">
			<button class="footer_btn" type="default" @click="fnNavigateToPage('verification')">
				手机登录或注册
			</button>
			<view class="footer_other">
				<button class="footer_other--item" type="default">
					<image class="footer_other--icon" src="/static/icon-login/icon_login_apple.png" mode="scaleToFill">
					</image>
				</button>
				<button class="footer_other--item" type="default">
					<image class="footer_other--icon" src="/static/icon-login/icon_login_wx.png" mode="scaleToFill">
					</image>
				</button>
				<button class="footer_other--item" type="default">
					<image class="footer_other--icon" src="/static/icon-login/icon_login_weibo.png" mode="scaleToFill">
					</image>
				</button>
			</view>
			<view class="footer_text">
				<text>登录后即表示同意孤独菌</text>
				<text class="footer_text-link" @click="fnNavigateToPage('user_agreement')">用户使用协议</text>
			</view>
		</view>
		<!-- E 底部登录区 -->
	</view>
</template>

<script>
	export default {
		name: "Login",
		onLoad(opt) {},
		data() {
			return {
				code: null
			};
		},
		methods: {
			// 跳转页面
			fnNavigateToPage(type) {
				let url = null;
				let data = {};
				switch (type) {
					case 'verification': // 登录验证
						url = '/pages/account/verification/verification';
						break;
					case 'user_agreement': // 用户协议
						data = {
							title: "用户使用协议",
							url: "https://www.tailwindcss.cn/docs/letter-spacing"
						};
						url = '/pages/other/webview/webview';
						break;
				}

				if (!url) return 0;
				this.$navigateTo(url, data)
			}
		}
	}
</script>

<style lang="scss">
	$--color-background: #474e54;

	.login {
		height: 100vh;
		background-color: $--color-background;

		// 品牌区
		.brand {
			position: absolute;
			top: 196rpx;
			left: 0;
			right: 0;
			width: auto;
			text-align: center;

			&_logo {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				overflow: hidden;
				padding-bottom: 28rpx;
			}

			&_text {
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 10rpx;
				color: #BBBBBB;
				line-height: 60rpx;
			}
		}

		// 底部登录区
		.footer {
			position: absolute;
			bottom: 32rpx;
			left: 0;
			right: 0;
			width: auto;
			text-align: center;

			&_btn {
				margin: 0 auto;
				width: 520rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 8rpx;
				color: #DDDDDD;
				background-color: #607d8b;
				border-radius: 90rpx;
				border: none;
			}

			&_other {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				width: 520rpx;
				margin: 0 auto;
				padding-top: 64rpx;
				padding-bottom: 128rpx;

				&--item {
					background-color: $--color-background;
					height: 96rpx;
					width: 96rpx;
					padding: 0;
					border-radius: 50%;
					border: none;
				}

				&--icon {
					width: 100%;
					height: 100%;
				}
			}

			&_text {
				font-size: 28rpx;
				font-weight: normal;
				letter-spacing: 8rpx;
				color: #878787;

				&-link {
					color: #607d8b;
				}
			}
		}
	}
</style>
